<!-- 点击活动跳转到活动详情页面 -->
<template>
    <!-- 详情内容 -->
    <view class="detail-content">
      <image :src="detail.poster" class="poster" mode="aspectFit" ></image>
      <div class="info">
        <h1 class="title">{{ detail.title }}</h1>
        <div class="meta">
          <span>类型：{{ detail.type }}</span>
          <span>积分：{{ detail.point }}</span>
        </div>
        <div class="time">
          <span>时间：{{ formatTime(detail.startTime) }} 至 {{ formatTime(detail.endTime) }}</span>
        </div>
      </div>
      
      <!-- 新增已参与人数和最大参与人数 -->
      <div class="section">
        <h2 class="section-title">参与人数信息</h2>
        <div class="meta">
          <span>已参与人数：{{detail.peopleNum}}人</span>
          <br />
          <span>最大参与人数：{{detail.maxPeopleNum}}人</span>
        </div>
      </div>
      
      <div class="section">
        <h2 class="section-title">活动描述</h2>
        <p class="section-desc">{{ detail.description || '暂无活动描述' }}</p>
      </div>
      
      <!-- 新增积分规则描述 -->
      <div class="section">
        <h2 class="section-title">积分规则描述</h2>
        <p class="section-desc">{{ detail.ruleDescription || '暂无积分规则描述' }}</p>
      </div>
    </view>
</template>

<script setup lang="ts">
// 导入 onShow 生命周期钩子
import { onShow } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { get } from '../../http/request';
import { activityDetailApi } from '../../http/home.js';

// 获取路由参数
const route = useRoute();
// const activityId = route.query.id as string;
const activityId = Number(route.query.id);

// 状态管理
const detail = ref({});
const errorMsg = ref('');

// 判断是否已登录
const checkLogin = () => {
  // 从本地存储中获取 accessToken
  const token = uni.getStorageSync('accessToken')
  if (!token) {
    // 如果未登录，跳转到登录页面
    uni.reLaunch({
      url: '/pages/login/login'
    })
  }
}

// 获取活动详情（仅关注活动描述相关字段）
onShow(() => {
  checkLogin();
  // 获取活动详情逻辑
  activityDetailApi(activityId)
  .then((res: any) => {
    detail.value = res;
    // console.log(detail.value);
  })
  .catch(() => {
    errorMsg.value = '网络错误，请重试';
  });
})

// 时间格式化（简化版）
const formatTime = (timeStr: string) => {
  if (!timeStr) return '';
  return new Date(timeStr).toLocaleString();
};
</script>

<style scoped lang="scss">
.detail-content {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  
  .poster {
    width: 100%;
    height: 400rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }
  
  .info {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .title {
      font-size: 38rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
      color: #333;
      line-height: 1.4;
    }
    
    .meta, .time {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 12rpx;
      display: flex;
      align-items: center;
      
      span {
        margin-right: 24rpx;
        display: flex;
        align-items: center;
        
        &::before {
          content: "";
          display: inline-block;
          width: 8rpx;
          height: 8rpx;
          background-color: #007AFF;
          border-radius: 50%;
          margin-right: 12rpx;
        }
      }
    }
  }
  
  .section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .section-title {
      font-size: 34rpx;
      font-weight: 600;
      margin-bottom: 24rpx;
      color: #333;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #007AFF;
        border-radius: 4rpx;
      }
    }
    
    .section-desc {
      font-size: 30rpx;
      color: #555;
      line-height: 1.8;
      padding: 24rpx;
      background-color: #f8f9fa;
      border-radius: 12rpx;
      border-left: 4rpx solid #007AFF;
    }
  }
}

/* 响应式调整 */
@media (min-width: 768px) {
  .detail-content {
    max-width: 750px;
    margin: 0 auto;
    padding: 40rpx;
    
    .poster {
      height: 450rpx;
    }
  }
}
</style>